<!DOCTYPE HTML>
<html>
 <head>
  <title> </title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
   <link href="../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
    code {
      padding: 0px 4px;
      color: #d14;
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
    }
   </style>
 </head>
 <body>
  
    <div class="container">
      <div class="row">
        <div class="span8">
          <h2>简介</h2>
          <p>左侧菜单包含二级菜单：（右图所示）</p>
          <ol>
            <li>用于分类的二级菜单</li>
            <li>用于打开页面的三级菜单</li>
          </ol>
          <p>菜单的配置项比较简单，每个对象代表一个左侧菜单，一个模块有一个左侧菜单包含以下字段：</p>
          <ol>
            <li>id:模块的编号，用于定位模块</li>
            <li>homePage:模块默认显示的主页，使用页面的id</li>
            <li>collapse:左侧菜单是否默认收缩,默认false</li>
            <li>menu：菜单的集合，是一个数组，其中每个对象代表一个二级菜单</li>
          </ol>
          <p>二级菜单的配置项：<p>
          <ol>
            <li>text:文本</li>
            <li>collapsed：是否收缩，默认false</li>
            <li>closeable: 是否可以关闭标签，默认true，如果设置成首页，可以将此属性设为false</li>
            <li>items：三级菜单集合</li>
          </ol>
          <p>三级菜单的配置项</p>
          <ol>
            <li> id: 页面id,用于避免重复打开页面</li>
            <li>text:标题，同时是打开tab的标题</li>
            <li>href:页面URL</li>
          </ol>
        </div>
        <div class="span16">
          <h2>图示</h2>
          <img src="../assets/img/menu.jpg" alt="">
          <h3>示例</h3>
          <pre class="prettyprint linenums">
var config = [{   //模块菜单
  id:'menu',      //模块编号
  collapsed:true, //默认左侧菜单收缩
  homePage:'code', //默认打开的主页
  menu:[{         //二级菜单
      text:'首页内容',
      items:[   //三级菜单
        {id:'code',text:'首页代码',href:'main/code.html',closeable : false}, //设置不能关闭标签
        {id:'c',text:'标签页',href:'test.html'},
        {id:'d',text:'窗口变化',href:'test.html'},
        {id:'e',text:'首页资源文件',href:'test.html'},
        {id:'g',text:'其他',href:'test.html'}
      ]
    },{
      //二级菜单
      
    },{
      //二级菜单
  }]
},{
  
  //模块菜单
}];
//初始化主页菜单
new PageUtil.MainPage({
  modulesConfig : config
});
          </pre>
        </div>
      </div>
      <div class="row">
        <div class="span8"></div>
        <div class="span16"></div>
      </div>
    </div>
  <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="../assets/js/bui-min.js"></script>

  <script type="text/javascript" src="../assets/js/config-min.js"></script>
  <script type="text/javascript">
    BUI.use('common/page');
  </script>
  <!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
  <script type="text/javascript" src="../assets/js/prettify.js"></script>
  <script type="text/javascript">
    $(function () {
      prettyPrint();
    });
  </script>  

<body>
</html>  